<template>
  <div class="srbd">
    <div class="bd">
      <div class="cesaun_container">
        <h3 class="title">
          <p class="line">八字合盘</p>
        </h3>
        <div>
          <div>
            <div
              style="
                text-align: center;
                font-size: 14px;
                color: #ccc;
                margin-bottom: 20px;
              "
            >
              -------------------------甲方信息---------------------
            </div>
            <el-form
              :model="form"
              ref="form"
              label-width="120px"
              label-position="right"
            >
              <!-- 姓名 -->
              <el-form-item label="姓名：" prop="name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入姓名"
                  clearable
                  style="width: 450px"
                ></el-input>
              </el-form-item>
              <el-form-item label="性别：" prop="sex">
                <el-radio-group v-model="form.sex">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="历法：" prop="type">
                <el-radio-group v-model="form.type">
                  <el-radio label="1">阳历</el-radio>
                  <el-radio label="0">农历</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 生日 -->
              <el-form-item label="生日：" prop="birthday">
                <el-date-picker
                  v-model="form.birthday"
                  @change="dateBir"
                  type="datetime"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 450px"
                ></el-date-picker>
              </el-form-item>
            </el-form>
            <div
              style="
                text-align: center;
                font-size: 14px;
                color: #ccc;
                margin-bottom: 20px;
              "
            >
              -------------------------乙方信息---------------------
            </div>
            <el-form
              :model="formBy"
              ref="form"
              label-width="120px"
              label-position="right"
            >
              <!-- 历法选择 -->

              <el-form-item label="姓名：" prop="name">
                <el-input
                  v-model="formBy.name"
                  placeholder="请输入姓名"
                  clearable
                  style="width: 450px"
                ></el-input>
              </el-form-item>
              <el-form-item label="性别：" prop="sex">
                <el-radio-group v-model="formBy.sex">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 生日 -->
              <el-form-item label="生日：" prop="birthday">
                <el-date-picker
                  v-model="formBy.birthday"
                  @change="dateBirBoy"
                  type="datetime"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 450px"
                ></el-date-picker>
              </el-form-item>

              <!-- 历法选择 -->
              <el-form-item label="历法：" prop="type">
                <el-radio-group v-model="formBy.type">
                  <el-radio label="1">阳历</el-radio>
                  <el-radio label="0">农历</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="语言：" prop="lang">
                <el-radio-group v-model="form.lang">
                  <el-radio label="zh-cn">中文</el-radio>
                  <el-radio label="en-us">英文</el-radio>
                  <el-radio label="zh-tw">繁体</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 太阳时 -->

              <!-- 出生地区 -->
            </el-form>
          </div>
        </div>
        <div style="text-align: center">
          <el-button type="primary" @click="submitForm" style="margin: 20px"
            >立即测算</el-button
          >
        </div>

        <!-- 主体表单 -->
      </div>
      <div>
        <h3 class="title">
          <p class="line">测算简介</p>
        </h3>
        <div style="font-size: 14px; margin: 0 10px 20px 10px">
          <p style="">
            1.寻经问道八字合盘可以双方的生辰八字来以本命卦，年支同气，月令合，日干合，天干五合，合盘论吉凶，并给出相应分数，测算结果仅供参考。。
          </p>
        </div>
      </div>
    </div>
    <el-dialog
      title="测算结果"
      :visible.sync="centerDialogVisible"
      width="50%"
      class="dialog_cesuan"
    >
      <template>
        <div class="bazi_info">
          <div class="base_info">
            <div class="show">
              <span class="l">甲方姓名:</span>
              <span class="r">{{ result.female.name }}</span>
            </div>
            <div class="show">
              <span class="l">出生公历:</span>
              <span class="r">{{ result.female.gongli }}</span>
            </div>

            <div class="show">
              <span class="l">生肖属:</span>
              <span class="r">{{ result.female_sx }}</span>
            </div>
            <div class="show">
              <span class="l">您属于:</span>
              <span class="r">{{ result.minggong.female_fengshui }}</span>
            </div>
          </div>
          <div class="table">
            <div class="list-content">
              <div class="tr1">
                <div class="tr1_w">
                  <span class="">#</span>
                </div>
                <div
                  class=""
                  v-for="(tr1, index) in result.female.tg_cg_god"
                  :key="index"
                >
                  <span>{{ tr1 }}</span>
                </div>
                <div class="tr1_w">
                  <span>#</span>
                </div>
              </div>
              <div class="tr2">
                <div class="tr1_w">
                  <span style="font-weight: 800">乾造</span>
                </div>
                <div
                  class=""
                  v-for="(tr1, index) in result.female.bazi"
                  :key="index"
                >
                  <span>{{ tr1 }}</span>
                </div>
                <div class="tr1_w">
                  <span>{{ result.female.kw + "空" }}</span>
                </div>
              </div>
              <div class="tr3">
                <div class="tr1_w">
                  <span style="font-weight: 800">藏干</span>
                </div>
                <div
                  class=""
                  v-for="(tr1, index) in result.female.dz_cg"
                  :key="index"
                >
                  <span>{{ tr1 }}</span>
                </div>
                <div class="tr1_w">
                  <span>#</span>
                </div>
              </div>
              <div class="tr3">
                <div class="tr1_w">
                  <span> </span>
                </div>
                <div
                  class="item_w"
                  v-for="(tr1, index) in result.female.dz_cg_god"
                  :key="index"
                >
                  <span>{{ tr1 }}</span>
                </div>
                <div class="tr1_w">
                  <span>#</span>
                </div>
              </div>
              <div class="tr3">
                <div class="tr1_w">
                  <span style="font-weight: 800">衰旺</span>
                </div>
                <div
                  class="item_w"
                  v-for="(tr1, index) in result.female.day_cs"
                  :key="index"
                >
                  <span>{{ tr1 }}</span>
                </div>
                <div class="tr1_w">
                  <span>#</span>
                </div>
              </div>
              <div class="tr3" style="border-bottom: none">
                <div class="tr1_w">
                  <span style="font-weight: 800">纳音</span>
                </div>
                <div
                  class="item_w_nayin"
                  v-for="(tr1, index) in result.female.na_yin"
                  :key="index"
                >
                  <span>{{ tr1 }}</span>
                </div>
                <div class="tr1_w">
                  <span>#</span>
                </div>
              </div>
            </div>
          </div>
          <div class="bazixinxi" style="margin-top: 10px">
            <div class="base_info">
              <div class="show">
                <span class="l">乙方姓名:</span>
                <span class="r">{{ result.male.name }}</span>
              </div>
              <div class="show">
                <span class="l">出生公历:</span>
                <span class="r">{{ result.male.gongli }}</span>
              </div>

              <div class="show">
                <span class="l">生肖属:</span>
                <span class="r">{{ result.male_sx }}</span>
              </div>
              <div class="show">
                <span class="l">您属于:</span>
                <span class="r">{{ result.minggong.male_fengshui }}</span>
              </div>
            </div>
            <div class="table">
              <div class="list-content">
                <div class="tr1">
                  <div class="tr1_w">
                    <span class="">#</span>
                  </div>
                  <div
                    class=""
                    v-for="(tr1, index) in result.male.tg_cg_god"
                    :key="index"
                  >
                    <span>{{ tr1 }}</span>
                  </div>
                  <div class="tr1_w">
                    <span>#</span>
                  </div>
                </div>
                <div class="tr2">
                  <div class="tr1_w">
                    <span style="font-weight: 800">乾造</span>
                  </div>
                  <div
                    class=""
                    v-for="(tr1, index) in result.male.bazi"
                    :key="index"
                  >
                    <span>{{ tr1 }}</span>
                  </div>
                  <div class="tr1_w">
                    <span>{{ result.male.kw + "空" }}</span>
                  </div>
                </div>
                <div class="tr3">
                  <div class="tr1_w">
                    <span style="font-weight: 800">藏干</span>
                  </div>
                  <div
                    class=""
                    v-for="(tr1, index) in result.male.dz_cg"
                    :key="index"
                  >
                    <span>{{ tr1 }}</span>
                  </div>
                  <div class="tr1_w">
                    <span>#</span>
                  </div>
                </div>
                <div class="tr3">
                  <div class="tr1_w">
                    <span> </span>
                  </div>
                  <div
                    class="item_w"
                    v-for="(tr1, index) in result.male.dz_cg_god"
                    :key="index"
                  >
                    <span>{{ tr1 }}</span>
                  </div>
                  <div class="tr1_w">
                    <span>#</span>
                  </div>
                </div>
                <div class="tr3">
                  <div class="tr1_w">
                    <span style="font-weight: 800">衰旺</span>
                  </div>
                  <div
                    class="item_w"
                    v-for="(tr1, index) in result.male.day_cs"
                    :key="index"
                  >
                    <span>{{ tr1 }}</span>
                  </div>
                  <div class="tr1_w">
                    <span>#</span>
                  </div>
                </div>
                <div class="tr3" style="border-bottom: none">
                  <div class="tr1_w">
                    <span style="font-weight: 800">纳音</span>
                  </div>
                  <div
                    class="item_w_nayin"
                    v-for="(tr1, index) in result.male.na_yin"
                    :key="index"
                  >
                    <span>{{ tr1 }}</span>
                  </div>
                  <div class="tr1_w">
                    <span>#</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="hepanjieguo">
            <div class="title">
              <span class="shu"></span>
              <span class="ti">合盘结果</span>
            </div>

            <div class="details">
              <div class="names">
                <span>合作合盘：</span>
                <span>{{ result.minggong.score }}分</span>
              </div>
              <div class="des">
                <span class="des_span">说明</span>
                <span class="des_deta">{{ result.minggong.description }}</span>
              </div>
              <div class="des">
                <span class="des_span">详批</span>
                <span class="des_deta">{{
                  result.minggong.detail_description
                }}</span>
              </div>
            </div>
            <div class="details">
              <div class="names">
                <span>生意合盘：</span>
                <span>{{ result.nianqitongzhi.score }}分</span>
              </div>
              <div class="des">
                <span class="des_span">说明</span>
                <span class="des_deta">{{
                  result.nianqitongzhi.description
                }}</span>
              </div>
              <div class="des">
                <span class="des_span">详批</span>
                <span class="des_deta">{{
                  result.nianqitongzhi.detail_description
                }}</span>
              </div>
            </div>
            <div class="details">
              <div class="names">
                <span>财运合盘：</span>
                <span>{{ result.yueling.score }}分</span>
              </div>
              <div class="des">
                <span class="des_span">说明</span>
                <span class="des_deta">{{ result.yueling.description }}</span>
              </div>
              <div class="des">
                <span class="des_span">详批</span>
                <span class="des_deta">{{
                  result.yueling.detail_description
                }}</span>
              </div>
            </div>
            <div class="details">
              <div class="names">
                <span>恋爱合盘：</span>
                <span>{{ result.rigan.score }}分</span>
              </div>
              <div class="des">
                <span class="des_span">说明</span>
                <span class="des_deta">{{ result.rigan.description }}</span>
              </div>
              <div class="des">
                <span class="des_span">详批</span>
                <span class="des_deta">{{
                  result.rigan.detail_description
                }}</span>
              </div>
            </div>
            <div class="details">
              <div class="names">
                <span>运势合盘：</span>
                <span>{{ result.tiangan.score }}分</span>
              </div>
              <div class="des">
                <span class="des_span">说明</span>
                <span class="des_deta">{{ result.tiangan.description }}</span>
              </div>
              <div class="des">
                <span class="des_span">详批</span>
                <span class="des_deta">{{
                  result.tiangan.detail_description
                }}</span>
              </div>
            </div>

            <div class="details">
              <div class="names">
                <span>健康合盘：</span>
                <span>{{ result.jiankang.score }}分</span>
              </div>
              <div class="des">
                <span class="des_span">说明</span>
                <span class="des_deta">{{ result.jiankang.description }}</span>
              </div>
              <div class="des">
                <span class="des_span">详批</span>
                <span class="des_deta">{{
                  result.jiankang.detail_description
                }}</span>
              </div>
            </div>
            <div class="details">
              <div class="names">
                <span>总分数：</span>
                <span>{{ result.all_score }}分</span>
              </div>
            </div>
            <div class="yl">
              <span>仅供娱乐！请勿当真</span>
            </div>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  computed: {
    currentPath() {
      return this.$route.path; // 获取当前路由路径
    },
  },
  data() {
    return {
      centerDialogVisible: false,
      birthday: "",

      result: {
        male: {
          bazi: ["乙未", "己丑", "戊申", "丁巳"],
          gl_year: "2016",
          gl_month: "1",
          gl_day: "27",
          gl_hours: "9",
          sex: "乾造",
          name: "李栋",
          gongli: "2016年1月27日9时42分",
          kw: "寅卯",
          tg_cg_god: ["正官", "劫财", "日元", "正印"],
          dz_cg: ["己|丁|乙", "己|癸|辛", "庚|壬|戊", "丙|戊|庚"],
          dz_cg_god: [
            "劫财|正印|正官",
            "劫财|正财|伤官",
            "食神|偏财|比肩",
            "偏印|比肩|食神",
          ],
          day_cs: ["衰", "养", "病", "临官"],
          na_yin: ["沙中金", "霹雳火", "大驿土", "沙中土"],
        },
        female: {
          bazi: ["辛丑", "辛丑", "甲子", "己巳"],
          gl_year: "2022",
          gl_month: "1",
          gl_day: "11",
          gl_hours: "9",
          sex: "坤造",
          name: "张芳",
          gongli: "2022年1月11日9时42分",
          kw: "戌亥",
          tg_cg_god: [],
          dz_cg: [],
          dz_cg_god: [],
          day_cs: [],
          na_yin: [],
        },
        minggong: {
          male_fengshui: "东四命",
          female_fengshui: "东四命",
          score: "10",
          male_minggong: "震",
          female_minggong: "离",
          description: "。",
          detail_description: "。",
        },
        nianqitongzhi: {
          male_nian_zhi: "未",
          male_nian_zhi_desc: "火",
          female_nian_zhi: "丑",
          female_nian_zhi_desc: "水",
          description: "",
          detail_description: "",
          score: "0",
        },
        yueling: {
          score: "10",
          male_yue_zhi: "丑",
          female_yue_zhi: "丑",
          description: "",
          detail_description: "",
        },
        rigan: {
          score: "10",
          detail_description: "",
          male_yue_zhi: "戊",
          female_yue_zhi: "甲",
          description: "",
        },
        tiangan: {
          score: "5",
          male_yue_zhi: "戊",
          female_yue_zhi: "甲",
          description: "",
          detail_description: "",
        },
        jiankang: {
          score: "10",
          detail_description: "",
          description: "。",
        },
        all_score: 45,
        male_sx: "羊",
        female_sx: "牛",
        male_xz: "水瓶座",
        female_xz: "摩羯座",
      },
      area: "",
      form: {
        name: "",
        birthday: "",
        type: "1",

        sex: "男",
        year: "",
        month: "",
        day: "",

        hours: "",
        minute: "",
      },
      formBy: {
        name: "",

        type: "1",
        lang: "zh-cn",
        birthday: "",
        sex: "男",
        year: "",
        month: "",
        day: "",

        hours: "",
        minute: "",
      },

      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],

        type: [
          { required: true, message: "请选择历法类型", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    // this.getCurrentDate();
    let formBz = JSON.parse(localStorage.getItem("arrangeEightFormStorage"));
    console.log(formBz);
    if (formBz) {
      if (formBz.sex == 0) {
        this.formBy.name = formBz.name;
        this.formBy.sex = formBz.sex == 0 ? "男" : "女";
        this.formBy.type = formBz.isLunar == 0 ? "1" : "0";
      } else {
        this.form.name = formBz.nameBy;
        this.form.sex = formBz.sex == 0 ? "男" : "女";
        this.form.type = formBz.isLunar == 0 ? "1" : "0";
      }
      if (formBz.isLunar == 0) {
        if (this.form.sex == "女") {
          this.form.year = formBz.year;
          this.form.month = formBz.month;
          this.form.day = formBz.day;
          this.form.hours = this.padZero(formBz.hours);
          this.form.minute = this.padZero(formBz.minute);
          this.form.birthday =
            this.form.year +
            "-" +
            this.form.month +
            "-" +
            this.form.day +
            "" +
            this.form.hours +
            ":" +
            this.form.minute +
            ":00";
        } else {
          this.formBy.year = formBz.year;
          this.formBy.month = formBz.month;
          this.formBy.day = formBz.day;
          this.formBy.hours = this.padZero(formBz.hours);
          this.formBy.minute = this.padZero(formBz.minute);
          this.formBy.birthday =
            this.form.year +
            "-" +
            this.form.month +
            "-" +
            this.form.day +
            "" +
            this.form.hours +
            ":" +
            this.form.minute +
            ":00";
        }
      }
    }
  },
  methods: {
    dateBirBoy(val) {
      console.log(val);
      this.formBy.birthday = val;
      var date = new Date(val);

      // 获取各部分时间
      var year = date.getFullYear(); // 年（4位）
      var month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月（补零）
      var day = date.getDate().toString().padStart(2, "0"); // 日（补零）
      var hours = date.getHours().toString().padStart(2, "0"); // 时（补零）
      var minutes = date.getMinutes().toString().padStart(2, "0"); // 分（补零）

      this.formBy.year = year;
      this.formBy.month = month;
      this.formBy.day = day;
      this.formBy.hours = hours;
      this.formBy.minute = minutes;
    },
    padZero(num) {
      return num.toString().padStart(2, "0");
    },
    dateBir(val) {
      console.log(val);
      this.form.birthday = val;

      var date = new Date(val);

      // 获取各部分时间
      var year = date.getFullYear(); // 年（4位）
      var month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月（补零）
      var day = date.getDate().toString().padStart(2, "0"); // 日（补零）
      var hours = date.getHours().toString().padStart(2, "0"); // 时（补零）
      var minutes = date.getMinutes().toString().padStart(2, "0"); // 分（补零）

      this.form.year = year;
      this.form.month = month;
      this.form.day = day;
      this.form.hours = hours;
      this.form.minute = minutes;
    },

    submitForm() {
      if (!this.form.name) {
        this.$message.error("请输入姓名(甲)");
        return false;
      }
      if (!this.form.birthday) {
        this.$message.error("请选择生日(甲)");
        return false;
      }
      if (!this.formBy.name) {
        this.$message.error("请输入姓名(乙)");
        return false;
      }
      if (!this.formBy.birthday) {
        this.$message.error("请选择生日(乙)");
        return false;
      }

      let parmas = {
        api_key: "FNcQHQuf0W8wDrXMjWc0xqTzw",
        male_name: this.form.name,
        male_type: this.form.type,
        male_year: this.form.year,
        male_month: this.form.month,
        male_day: this.form.day,
        male_hours: this.form.hours,
        male_minute: this.form.minute,

        female_name: this.formBy.name,
        female_type: this.formBy.type,
        female_year: this.formBy.year,
        female_month: this.formBy.month,
        female_day: this.formBy.day,
        female_hours: this.formBy.hours,
        female_minute: this.formBy.minute,

        language: this.formBy.lang,
      };
      console.log(parmas);

      let config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      };
      this.$axios
        .post(window.config.apiUrl + "/v1/Bazi/hepan", parmas, config)
        .then((res) => {
          if (res.data.errcode == -1) {
            this.$message({
              type: "warning",
              message: res.data.errmsg,
            });

            return;
          }

          this.centerDialogVisible = true;
          this.result = res.data.data;
          console.log(this.result);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.bd {
  border: 1px solid #e5e5e5;
}

.cesaun_container {
}

::v-deep .el-card.is-always-shadow {
  box-shadow: none !important;
}

::v-deep .el-card__header {
  padding: 10px 20px !important;
}

.form-card {
  width: 100%;
  margin: 0 auto;
  border-radius: 2px;
}

.form-title {
  margin: 0;
  color: #303133;
  font-size: 16px;
  text-align: left;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-radio {
  margin-right: 30px;
}

::v-deep .distpicker-address-wrapper {
  width: 100% !important;
}

@mixin flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  height: 45px;
}

@mixin tr1_w {
  width: 33px;
  text-align: center;
}

::v-deep .el-dialog__body {
  padding: 0;
}

::v-deep .el-dialog {
  margin-top: 10px !important;
}

.dialog_cesuan {
  margin-top: 0 !important;
  overflow: hidden;

  .bazi_info {
    height: calc(100vh - 100px);
    overflow: auto;

    .base_info {
      margin: 20px;

      .title {
        display: flex;
        padding: 5px;

        .shu {
          width: 5px;
          height: 20px;
          background-color: #e6a84b;
          border-radius: 10px;
        }

        .ti {
          padding-left: 8px;
          font-weight: 800;
          font-size: 15px;
        }
      }

      .show {
        margin-top: 15px;

        .l_ {
          font-size: 14px;
          display: inline-block;
          min-width: 50px;
          font-weight: 800;
        }

        .l {
          font-size: 15px;
          display: inline-block;
          min-width: 80px;
          font-weight: 800;
        }
      }

      .details {
        border: 1px solid #e5e5e5;
        border-bottom: none;
        margin-top: 20px;

        .names {
          text-align: center;
          color: #e6a84b;
          border-bottom: 1px solid #e5e5e5;
          color: #e6a84b;
          font-weight: 800;
          background-color: #fff3ef;
          height: 50px;
          line-height: 50px;
        }

        .des {
          border-bottom: 1px solid #e5e5e5;
          padding-left: 10px;
          display: flex;
          align-items: center;

          .des_text {
            color: #e6a84b;
            width: 14%;
            font-weight: 800;
            user-select: text;
          }

          .des_deta {
            width: 85%;
            line-height: 26px;
            text-indent: 2em;
            user-select: text;
          }
        }
      }
    }

    .hepanjieguo {
      background-color: #fff;
      margin: 0 5px;
      margin-top: 10px;
      border-radius: 10px;

      .title {
        display: flex;
        padding: 10rpx;

        .shu {
          width: 5px;
          height: 20px;
          background-color: #e6a84b;
          border-radius: 10px;
        }

        .ti {
          padding-left: 15rpx;
          font-weight: 800;
          font-size: 30rpx;
        }
      }

      .details {
        border: 1px solid #e5e5e5;
        border-bottom: none;
        margin-top: 20px;

        .names {
          text-align: center;
          color: #e6a84b;
          border-bottom: 1px solid #e5e5e5;
          color: #e6a84b;
          font-weight: 800;
          background-color: #fff3ef;
          height: 50px;
          line-height: 50px;
        }

        .des {
          border-bottom: 1px solid #e5e5e5;
          padding-left: 20rpx;
          display: flex;
          align-items: center;

          .des_text {
            color: #e6a84b;
            width: 14%;
            font-weight: 800;
            user-select: text;
          }

          .des_deta {
            width: 85%;
            line-height: 26px;
            text-indent: 2em;
            user-select: text;
          }
        }
      }
    }

    .table {
      .list-content {
        width: 100%;

        .tr1 {
          .tr1_w {
            width: 33px;
            text-align: center;
          }

          view {
            color: #1c04cc;
            font-weight: 600;
          }

          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px;
          height: 45px;
          // height: 50px;
          border-bottom: 1px solid #ccc;
        }

        .tr2 {
          .tr1_w {
            width: 33px;
            text-align: center;
          }

          view {
            color: red;
          }

          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px;
          height: 45px;
          // height: 50px;
          border-bottom: 1px solid #ccc;
        }

        .tr3 {
          .tr1_w {
            width: 33px;
            text-align: center;
          }

          .item_w {
            width: 60px;
            text-align: center;
          }

          .item_w_nayin {
            color: green;
          }

          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px;
          height: 45px;
          // height: 50px;
          border-bottom: 1px solid #ccc;
        }
      }
    }
  }
}
</style>